<template>
	<div class="detailsLeave">
		<div class="teach_h classIndex_h  clear">
			<em @click="goback()">请假申请</em>
			<strong v-if="leaveDetails.name !==''"><i>></i> {{leaveDetails.name}}的请假审批</strong>
			<strong v-else><i>></i>请假审批详情</strong>
		</div>
		<!--  -->
		<div class="detailsLeave_">
			<ul>
				<template>
					<li class="detailsLeave_ls clear">
						<span>请假人</span>
						<div class="detailsLeave_lsr">
							<span>{{leaveDetails.name}}</span>
						</div>
					</li>
					<li class="detailsLeave_ls clear">
						<span>请假类型</span>
						<div class="detailsLeave_lsr">
							<span>{{['事假', '病假', '婚假', '丧假', '其他'][+leaveDetails.leave_style]}}</span>
						</div>
					</li>
					<li class="detailsLeave_ls clear">
						<span>开始时间</span>
						<div class="detailsLeave_lsr">
							<span>{{leaveDetails.start_time}}</span>
						</div>
					</li>
					<li class="detailsLeave_ls clear">
						<span>结束时间</span>
						<div class="detailsLeave_lsr">
							<span>{{leaveDetails.end_time}} </span>
						</div>
					</li>
					<li class="detailsLeave_ls clear">
						<span>请假原因</span>
						<div class="detailsLeave_lsr">
							<span>{{leaveDetails.content}}</span>
						</div>
					</li>
					<li class="detailsLeave_ls clear">
						<span>申请时间</span>
						<div class="detailsLeave_lsr">
							<span>{{leaveDetails.create_time}}</span>
						</div>
					</li>
					<li class="detailsLeave_ls clear" v-if="leaveDetails.picture && leaveDetails.picture.length > 0">
						<span>图片</span>
						<div class="detailsLeave_lsr">
							<strong @click='previewImg(leaveDetails.picture)'>预览</strong>
						</div>
					</li>
				</template>
			</ul>
			<!--  -->
			<div class="detailsLeave_st approved" v-if="leaveDetails.status == 1">
				<i class="ipm qingjia_icon01"></i>
				<p>已批准</p>
			</div>
			<div class="detailsLeave_st unapproved" v-if="leaveDetails.status == 2">
				<i class="ipm qingjia_icon04"></i>
				<p>未审批</p>
			</div>
			<div class="detailsLeave_st refuse" v-if="leaveDetails.status == 3">
				<i class="ipm qingjia_icon02"></i>
				<p>拒绝</p>
			</div>
			<div class="detailsLeave_st rescinded" v-if="leaveDetails.status == 4">
				<i class="ipm qingjia_icon02"></i>
				<p>已撤销</p>
			</div>
		</div>
		<div class="dependent" v-if="placeholder">
			<i class="ipm image_nofound"></i>
			<p>
				还没发现任何相关的内容哦~
			</p>
		</div>
		<!--  -->
		<div>
			<template v-if="leaveDetails.approve_id === 4 && headmaster">
				<div class="buttonCSS" v-if="leaveDetails.status == 2">
					<el-button type="primary" plai @click="getRefuse(leaveDetails.id)">拒绝</el-button>
					<el-button type="primary" @click="getApproval(leaveDetails.id)">批准</el-button>
				</div>
			</template>
			<template v-if="leaveDetails.approve_id <= admin && $g.user_id != leaveDetails.create_id">
				<div class="buttonCSS" v-if="leaveDetails.status == 2">
					<el-button type="primary" plai @click="getRefuse(leaveDetails.id)">拒绝</el-button>
					<el-button type="primary" @click="getApproval(leaveDetails.id)">批准</el-button>
				</div>
			</template>
			<!--  -->
			<div class="leaveRefusal" v-if="leaveDetails.status == 3">
				<span>拒绝理由</span>
				<strong>{{leaveDetails.reason_content}}</strong>
			</div>
		</div>
		<!-- 预览图片 -->
		<image-viewer v-if="imagePreview.showViewer" :on-close="closeViewer" :url-list="imagePreview.previewSrcList">
		</image-viewer>
		<!-- 理由 -->
		<el-dialog title="理由" :visible.sync="reasonCause" width="520px" custom-class="reasonCause" :close-on-click-modal="false">
			<div class="Approval_TXT">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label-width="0" prop="desc">
						<el-input type="textarea" :rows="4" maxlength="200" placeholder="请填写拒绝理由, 不超200个字符" v-model="ruleForm.desc"></el-input>
					</el-form-item>
					<el-form-item class="buttonCSS" label-width="0">
						<el-button @click="resetForm('ruleForm')" type="primary" plain>取消</el-button>
						<el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-dialog>
	</div>
</template>
<script>
// import menuLink from './menuLink.vue'
export default {
	name: '',
	data() {
		return {
			imagePreview: { /*图片预览*/
				showViewer: false,
				previewSrcList: []
			},

			leaveDetails: [],
			reasonCause: false, //理由--原因
			leave_id: '',
			ruleForm: { desc: '' },
			rules: {
				desc: [
					{ required: true, message: '请填写拒绝理由', trigger: 'blur' }
				]
			},
			placeholder: false,
			superior: false,
			teacher: '',
			student: '',
			admin: '',
			headmaster: ''
		}
	},
	watch: {
		'changData'(val, newval) {
			this.path = sessionStorage.getItem('classId')
			this.$router.push({ path: '/class/leave/index', query: { id: this.path } })
		}
	},
	computed: {
		changData() {
			return deep_clone(this.$store.state.changData);
		},
	},
	created() {
		this.getLeaveDetails()
	},
	methods: {
		super() {
			let role = this.$store.getters.userInfo.rolebaseid;
			this.headmaster = this.$store.getters.userInfo.is_headmaster === 1

			role.forEach((item) => {

				if (item === 6) {
					this.teacher = item
				} else if (item === 4) {
					this.student = item
				} else if (item <= 3) {
					this.admin = item
				}
			})
		},
		goback() {
			this.$router.back(-1)
		},
		getLeaveDetails() {

			let success = (res => {

				let data = res.data;
				this.leaveDetails = data;
				this.leave_title = this.leaveDetails.name

				this.leaveDetails.length === 0 ?
					this.placeholder = true :
					this.placeholder = false

				this.super()
			})
			this.$ajax({
				url: 'api/leave/leave',
				method: 'get',
				params: {
					leaveid: this.$route.query.id,
					// userid: this.$g.user_id
				},
				func: { success: success }
			})

		},
		//批准
		getApproval(id) {
			this.$confirm('确认要批准申请吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				customClass: 'confirm-them',
			}).then(() => {
				let success = (res => {
					this.getLeaveDetails()
				});
				this.$ajax({
					url: 'api/leave/leave',
					method: 'put',
					data: {
						status: 1,
						leaveid: id
					},
					func: { success: success }
				})
			}).catch(() => {});
		},
		/**
		 * 关闭图片
		 * @DateTime 2020-04-16T17:40:41+0800
		 * @qiu_m
		 * @return   {[type]}                 [description]
		 */
		closeViewer() {
			this.imagePreview.showViewer = false;
			this.imagePreview.previewSrcList = []
		},
		//查看图片
		previewImg(picture) {

			let img = this.BASE_URL + picture
			this.imagePreview.showViewer = true
			this.imagePreview.previewSrcList.push(img)
		},
		getRefuse(id) {
			this.leave_id = id
			this.reasonCause = true
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					let success = (res => {
						this.$message.success(res.msg);
						this.reasonCause = false
						this.getLeaveDetails()
						this.ruleForm.desc = ''
					});
					this.$ajax({
						url: 'api/leave/leave',
						method: 'put',
						data: {
							leaveid: this.leave_id,
							reason_content: this.ruleForm.desc,
							status: 3
						},
						func: { success: success }
					})
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		resetForm(formName) {
			this.reasonCause = false
		},
	}
}
</script>